<template>
  <div>
    <div>
      <el-dialog :visible.sync="orderDetailVisible" @close="closeOrderDetailDialog" width="1500px">
        <MyOrderDetail :id="currentOrderDetailId"></MyOrderDetail>
      </el-dialog>
      <el-dialog title="支付" :visible.sync="payDialogVisible" width="30%" @close="closePay" destroy-on-close
                 append-to-body>
        <Pay :totalAmount="totalAmount" :orderId="orderId"></Pay>
      </el-dialog>
      <el-card class="filter-container" shadow="never">
        <div>
          <h2 class="h1 hero-title">
            <strong><i class="el-icon-s-order"></i>我的订单</strong>
          </h2>
        </div>

        <template>
          <el-table :data="tableData" border>
            <el-table-column prop="productPic" label="商品图片" width="125" align="center">
              <template slot-scope="scope" >
                    <img style="height: 80px" :src='scope.row.orderItemList[0].productPic'/>
              </template>
            </el-table-column>
            <el-table-column prop="receiverName" label="收件人" align="center">
            </el-table-column>
            <el-table-column label="订单状态" align="center">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.status == 0">待付款</el-tag>
                <el-tag type="warning" v-if="scope.row.status == 1">待发货</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 2">已发货</el-tag>
                <el-tag type="primary" v-if="scope.row.status == 3">已完成</el-tag>
                <el-tag type="info" v-if="scope.row.status == 4">已关闭</el-tag>
                <el-tag type="info" v-if="scope.row.status == 5">无效订单</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="totalAmount" label="总金额" align="center">
            </el-table-column>
            <el-table-column prop="freightAmount" label="运费" align="center">
            </el-table-column>
            <el-table-column prop="payAmount" label="实付金额" align="center">
              <template slot-scope="scope">
                <div style="color: orangered">{{ scope.row.payAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300" align="center">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="success"
                    @click="showDetail(scope.row)"
                >
                  查看
                </el-button>
                <el-button
                    size="mini"
                    @click="pay(scope.row)"
                    type="primary"
                    v-show="scope.row.status===0"
                    plain>支付
                </el-button>

                <el-button
                    size="mini"
                    @click="handleCloseOrder(scope.row)"
                    type="danger"
                    v-show="scope.row.status===0"
                    plain>取消
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="pageNum"
                :page-size="pageSize"
                :page-sizes="[5,10,15]"
                :total="total">
            </el-pagination>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
import {closeOrder, getOrderByMemberId} from "@/api/order";
import MyOrderDetail from "@/views/front/MyOrderDetail";
import Pay from "@/views/front/Pay";

export default {
  name: "MyOrder",
  components: {
    MyOrderDetail,
    Pay
  },
  data() {
    return {
      memberId: 1,
      multipleSelection: [],
      productName: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      tableData: [],
      totalPrice: 0,
      totalNum: 0,
      orderDetailVisible: false,
      currentOrderDetailId: 0,
      ids: [],
      payDialogVisible: false,
      totalAmount: 0,
      orderId:0
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      //请求查询数据
      let params = {
        id: this.memberId,
        productName: this.productName,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      getOrderByMemberId(params).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      })
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },

    showDetail(row) {
      this.currentOrderDetailId = row.id
      this.orderDetailVisible = true
    },

    pay(row){
      //TODO 跳转到支付模块
      this.orderId = row.id
      this.totalAmount = row.totalAmount
      this.payDialogVisible = true
    },

    handleCloseOrder(row){
      let params = new URLSearchParams();
      this.ids = [];
      this.ids.push(row.id);
      params.append('ids', this.ids);
      params.append('note', '用户取消订单');
      closeOrder(params).then(response => {
        this.ids = [];
        this.load();
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        });
      });
      location.reload();
    },

    closeOrderDetailDialog(){
      this.currentOrderDetailId = 0;
      this.orderDetailVisible = false;
    },
    closePay(){
      this.payDialogVisible = false;
    }
  }
}
</script>

<style scoped>
.fixed {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 75%;
  display: flex;
  justify-content: flex-end;
}
</style>